<template>
  <!-- 面包屑 -->

  <!-- <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
  </el-breadcrumb> -->
  <!-- x选择框 -->
  <div style="margin-top: 20px">
    <el-radio->
      <el-radio-button
        label="用户管理"
        :class="{ active: colorCom === true }"
        @click="handleclick"
      />
      <el-radio-button
        label="配置管理"
        @click="handleclick2"
        :class="{ active: colorCom2 === true }"
      />
    </el-radio->
  </div>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%" v-if="colorCom">
    <el-table-column prop="unid" label="unid"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="nickname" label="昵称"></el-table-column>
    <el-table-column prop="vipLevel" label="vip等级"></el-table-column>
    <el-table-column prop="nickname" label="操作"></el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import * as api from '../../../api/vip';
let tableData = ref([]);
api.getAllUserApi().then((res) => {
  console.log(res);
  tableData.value = res.data.data;
});
//声明变量控制类名
let colorCom = ref(true);
let colorCom2 = ref(false);
//点击事件控制类名和数据跳转
let handleclick = () => {
  colorCom.value = true;
  colorCom2.value = false;
};
let handleclick2 = () => {
  colorCom.value = false;
  colorCom2.value = true;
};
</script>
<script>
export default {
  meta: {
    name: '用户管理',
    title: 'yhgl',
    icon: '#icon-wode'
  }
};
</script>
<style scoped>
.bread {
  margin-bottom: 10px;
  margin-top: 10px;
}
.active {
  border-bottom: 2px solid rgb(0, 255, 191);
}
</style>
